<template>
	<div class="mycontrols">
		<i class="glyphicon glyphicon-backward" title="上一个"></i>
		<i class="glyphicon" :class='iconPlay' @click="iPlay" title="播放/暂停"></i>
		<i class="glyphicon glyphicon-forward" title="下一个"></i>
		<div class="volum-div">
			<i class="glyphicon glyphicon-repeat" title="重播" @click='replay'></i>
			<i class="glyphicon" :class='iconVolume' ref="volumeDown" @click='iMute' title="静音"></i>
			<slot></slot>
			<div class="expand">
				<i class="glyphicon i-expand" :class='iconExpand' v-show='eyeShow' @click="iExpand(0)" title="网页全屏"></i>
				<i class="glyphicon glyphicon-move l-expand" @click="iExpand(1)" title="全屏"></i>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'videoControls',
		props: ["isShow", 'isPlay', 'eyeShow'],
		data() {
			return {
				isVolume: true,
				isAllExpand: true,
				isPageExpand: true,
			}
		},
		components: {
			// VolumeProgress
		},
		computed: {
			iconPlay() {
				return {
					'glyphicon-play': this.isPlay,
					'glyphicon-pause': !this.isPlay
				}
			},
			iconVolume() {
				return {
					'glyphicon-volume-down': this.isVolume,
					'glyphicon-volume-off': !this.isVolume
				}
			},
			iconExpand() {
				return {
					'glyphicon-resize-full': this.isPageExpand,
					'glyphicon-resize-small': !this.isPageExpand
				}
			}
		},
		methods: {
			iPlay() {
				// 点击 播放/暂停图标 给父组件发射 播放/暂停事件
				this.$emit('iplay')
			},
			iMute() {
				// 点击 音量图标 给父组件发射 静音事件
				this.isVolume ? this.$emit('imute', this.isVolume) : this.$emit('imute', this.isVolume)
				this.isVolume = !this.isVolume
			},
			replay() {
				this.$emit('replay')
			},
			iExpand(bool) {
				if (!bool) { // 网页全屏
					this.$store.commit('pageExpandVideo', this.isPageExpand)
					this.isPageExpand = !this.isPageExpand
					return
				}
				// 全屏
				this.$emit('allExpand', this.isAllExpand)
				this.isAllExpand = !this.isAllExpand
			}
		},

	}
</script>

<style>
	/* 响应式 */
	@media screen and (min-width: 0) and (max-width: 700px) {
		.i-expand {
			display: none;
		}
	}
	@media screen and (min-width: 0px) and (max-width: 320px) {
		.mycontrols i {
			font-size: 5px;
		}
	}
	@media screen and (min-width: 320px) and (max-width: 350px) {
		.mycontrols i {
			font-size: 15px;
		}
	}
	
	
	.mycontrols {
		position: absolute;
		bottom: 7px;
		left: 0;
		right: 0;
		padding-left: 20px;
		height: 33px;
		color: #f0f0f0;
		line-height: 37px;
		font-size: 20px;
		background: rgb(0, 0, 0, 0.1);
		border-radius: 0 0 2px 2px;
	}

	.volum-div {
		float: right;
		position: relative;
		right: 130px;
	}

	.expand {
		float: right;
		position: relative;
		height: 33px;
		left: 100px;
	}

	.mycontrols i {
		cursor: pointer;
	}

	.l-expand,
	.i-expand {
		cursor: pointer;
	}

	.i-expand {
		font-size: 18px;
	}
</style>
